<template>
	<w-container :showCopyright="false" :hasNav="false" :isTabPage="false" :loading="loading" id='product-details'>
		<view class="pa-16">
			<!-- <image :src="product." class="br" style="height: 260rpx;width: 100%;"></image> -->
			<image class="br-12" v-if="product.main_image||product.cover_image" style="height: 260rpx;width: 100%;" mode="widthFix" :src="$ossUrl+(product.main_image||product.cover_image)" ></image>
			<w-button @click="showPoster = true" class="mt-10">邀请</w-button>
			<z-common-box marginTop="30rpx" radius="20px">
				<view class="text-center font-size-14 font-color-666">
					<text>您已成功获得助力</text>
					<text class="font-color-theme ml-6 mr-6">{{success_count}}</text>
					<text>次</text>
				</view>
			</z-common-box>
			<view class="flex flex-dir-col align-center flex-js-center pa-16">
				<view class="flex flex-ai-center flex-js-sb font-size-12 mb-16" style="color: #979997;">
					<view class="zhanbi1">日期</view>
					<view class="zhanbi">用户类型</view>
					<view class="zhanbi2">为您助力用户</view>
					<view class="zhanbi1">结果</view>
				</view>
				<view v-for="(item,index) in list" :key="index" :class="index%2 == 0?'bg_jb':''" class="item_box flex flex-ai-center flex-js-sb font-size-13 font-color-theme_title">
					<view class="zhanbi1">{{item.time}}</view>
					<view class="zhanbi">{{item.is_new_user == 1?'新':'老'}}用户</view>
					<view class="zhanbi2 flex flex-ai-center">
						<image :src="$ossUrl + item.avatar" style="width: 32rpx;height: 32rpx;border-radius: 100%;margin-right: 8rpx;"></image>
						<view>{{item.nickname}}</view>
					</view> 
					<view v-if="item.is_real == 1" class="zhanbi1 font-color-theme">成功</view>
					<view v-else class="zhanbi1">失败</view>
				</view>
				<u-empty v-if="!list.length"></u-empty>
			</view>
			<z-common-box boxShadow marginTop="10rpx">
				<view class="flex flex-ai-center mb-12">
					<u-icon name="/static/img/icon/icon_cp.png" size="15"></u-icon>
					<view class="font-color-theme_title ml-10 font-size-16 font-w-bold">助力规则</view>
				</view>
				<u-parse :content="handleLang(helpdraw_rule)"></u-parse>
			</z-common-box>
		</view>
		<z-image-share v-model="showPoster" :sharePath="sharePath" :product='product'></z-image-share>
	</w-container>
</template>

<script>
	import { friendhehplist } from "@/api/draw/index.js"
	import { mapState } from "vuex"
	export default {
		data() {
			return {
				loading:false,
				product:{},
				showPoster:false,
				list:[],
				page:0,
				status:'loadmore',
				success_count:0,
				sharePath:''
			}
		}, 
		computed:{
			...mapState('config',{
				helpdraw_rule(state){
					return state.info.helpdraw_rule
				}
			})
		},
		onLoad() {
			this.product = uni.getStorageSync('invitFriend')
			const { id,goods_type,batch_id } = this.product
			this.sharePath = `/pages/product/collection?id=${id}&type=${goods_type}&batch_id=${batch_id}`
			// console.log(this.sharePath);
			// this.product.invitFriend = 1  //设置邀请好友的表示，传递给路由
			this.$set(this.product,'invitFriend',1) //设置邀请好友的表示，传递给路由
			this.getFriendhehplist()
		},
		beforeDestroy() {
			uni.removeStorageSync('invitFriend')
		},
		onReachBottom() {
			this.getFriendhehplist()
		},
		methods: {
			getFriendhehplist(){
				if(this.status != 'loadmore') return
				this.page++
				this.status = 'loading'
				const { goods_id,goods_type } = this.product
				friendhehplist({goods_id,goods_type,page:this.page}).then( res => {
					const { list,success_count,page_size } = res.data
					this.list = this.list.concat( list )
					this.status = 'loadmore'
					if(this.page == 1) this.success_count = success_count
					if( list.length == 0 || (this.page == 1 && list.length < page_size)) this.status = 'nomore'
				}).catch( err => {})
			}			
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #f5f5f5;
	}
	.zhanbi {
		width: 25%;
		text-align: center;
	}
	.zhanbi1 {
		width: 20%;
		text-align: center;
	}
	.zhanbi2 {
		width: 35%;
		text-align: center;
	}
	.item_box {
		width: 100%;
		height: 80rpx;
		border-radius: 8px 0px 0px 8px;
	}
	.bg_jb {
		background: linear-gradient(90deg, #91EDF3 0%, rgba(145,243,243,0) 100%);
	}
</style>
